<form id="<?php echo $uniqid;?>" method="post" style="padding: 0;">
    <table border="0" width="100%" cellspacing="1" cellpadding="0" class="formtable">
        <tr>
            <td style="padding:0">
                <table cellspacing="0" cellpadding="0" border="0" class="el-table el-table__header" width="100%">
                    <colgroup>
                        <col name="el-table_1_column_1" width="280">
                        <col name="el-table_1_column_2" width="50">
                        <col name="el-table_1_column_3" width="100">
                        <col name="el-table_1_column_4" width="150">
                    </colgroup>
                    <thead class="has-gutter">
                    <tr class="">
                        <th colspan="1" rowspan="1" class="el-table_1_column_1     is-leaf">
                            <div class="cell">商品</div>
                        </th>
                        <th colspan="1" rowspan="1" class="el-table_1_column_2     is-leaf">
                            <div class="cell">数量</div>
                        </th>
                        <th colspan="1" rowspan="1" class="el-table_1_column_3     is-leaf">
                            <div class="cell">发货状态</div>
                        </th>
                        <th colspan="1" rowspan="1" class="el-table_1_column_4     is-leaf">
                            <div class="cell">快递单号</div>
                        </th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr class="el-table__row" v-for="(vo,index) in params.item">
                        <td rowspan="1" colspan="1" class="el-table_1_column_1  ">
                            <div class="cell">
                                <div class="display-flex">
                                    <label style="margin-right: 20px;width: 20px;" v-if="params.status>0 && vo.dispatch_status<2 && vo.refund_status<1 && vo.aftersale_status<1">
                                        <input type="checkbox" class="textbox-prompt" :value="vo.goods_sku_price_id" v-model="deliveryParams.items"/>
                                    </label>
                                    <label style="margin-right: 20px;width: 20px;" v-else></label>
                                    <img :src="vo.goods_image" class="table-img" style="max-height: 50px; flex:1">
                                    <div style="flex:5">
                                        <div class="goods-title goods-title-ellipsis" style="height: 50px;overflow: hidden;">
                                            <p>{{ vo.goods_title }} </p></div>
                                        <div class="color-999" v-if="vo.goods_sku_text"><span>规格：{{ vo.goods_sku_text }}</span></div>
                                    </div>
                                </div>
                            </div>
                        </td>
                        <td rowspan="1" colspan="1" class="el-table_1_column_2  ">
                            <div class="cell"><span class="color-666">{{ vo.goods_num }}</span></div>
                        </td>
                        <td rowspan="1" colspan="1" class="el-table_1_column_3  ">
                            <div class="cell">
                                    <span class="color-666" v-if="params.status>0">
                                        <span v-if="vo.dispatch_type=='express'">{{vo.dispatch_status | dispatch}}</span>
                                        <span v-else>{{ vo.status }}</span>
                                    </span>
                                <span class="color-666" v-else>-</span>
                            </div>
                        </td>
                        <td rowspan="1" colspan="1" class="el-table_1_column_3  ">
                            <div class="cell">-</div>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <div style="font-size: 14px; font-weight: bolder;">配送信息  - <span class="color-666">{{ params.item && params.item[0].dispatch_type | dispatchType }}</span></div>
                <div style="justify-content: space-between; align-items: center; text-align: left;">
                    <p>收货人: {{ params.consignee }} {{ params.phone }}</p>
                    <p>省市区: {{ params.province_name }} {{ params.city_name }} {{ params.area_name }}</p>
                    <p>收货地址: {{ params.address }}</p>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div class="flex">
                    <div>
                        快递公司
                        <select id="deliveryExpress" style="width:250px;"></select>
                    </div>
                    <div>
                        快递单号
                        <input type="text" v-model="deliveryParams.express_no" style="width: 250px;border: 1px solid #dcdfe6;" class="forminput inputstyle">
                    </div>
                </div>
            </td>
        </tr>
        <tr><td><div style="padding: 20px"></div></td></tr>
    </table>
</form>

<script>
    var deliveryVm = new Vue({
        el: '#<?php echo $uniqid;?>',
        data: {
            params: JSON.parse('<?php echo addslashes($dataset);?>'),
            deliveryParams:JSON.parse('<?php echo addslashes($express);?>')
        },
        filters: {
            dispatch(value) {
                // 0=未发货,1=已发货,2=已收货
                switch (parseInt(value)) {
                    case 0:
                        return '未发货';
                    case 1:
                        return '已发货';
                    case 2:
                        return '已收货';
                }
            },
            aftersale(value) {
                // -1=拒绝,0=未申请,1=申请售后,2=售后完成
                switch (parseInt(value)) {
                    case -1:
                        return '拒绝';
                    case 0:
                        return '未申请';
                    case 1:
                        return '申请售后';
                    case 2:
                        return '售后完成';
                }
            },
            refund(value) {
                // -1=拒绝退款,0=无,1=申请中,2=同意
                switch (parseInt(value)) {
                    case -1:
                        return '拒绝退款';
                    case 0:
                        return '无';
                    case 1:
                        return '申请中';
                    case 2:
                        return '同意';
                    case 3:
                        return '退款完成';
                }
            },
            dispatchType(value){
                // express=物流快递,selfetch=用户自提,store=商户配送,autosend=自动发货
                switch (value) {
                    case 'express':
                        return '物流快递';
                    case 'selfetch':
                        return '用户自提';
                    case 'store':
                        return '商户配送';
                    case 'autosend':
                        return '自动发货';
                }
            },
            platform(value){
                // H5=H5,wxOfficialAccount=微信公众号,wxMiniProgram=微信小程序,App=App
                switch (value) {
                    case 'H5':
                    case 'App':
                        return value;
                    case 'wxOfficialAccount':
                        return '微信公众号';
                    case 'wxMiniProgram':
                        return '微信小程序';
                }
            },
            type(value){
                switch (value) {
                    case 'goods':
                        return '商城订单';
                    case 'score':
                        return '积分订单';
                }
            },
            payType(value){
                // wechat=微信支付,alipay=支付宝,wallet=钱包支付,score=积分支付
                switch (value) {
                    case 'wechat':
                        return '微信支付';
                    case 'alipay':
                        return '支付宝';
                    case 'wallet':
                        return '钱包支付';
                    case 'score':
                        return '积分支付';
                    case 'JoinPay-wx':
                        return '汇聚支付-微信';
                    case 'JoinPay-ali':
                        return '汇聚支付-支付宝';
                    case 'pickgoods':
                        return '提货卡';
                    default:
                        return '未支付';
                }
            },
            formatDate(nS){
                return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ');
            }
        },
        mounted() {
            this.init();
        },
        methods: {
            init() {
                this.deliveryParams.member_id = this.deliveryParams.member_id ? this.deliveryParams.member_id : this.params.member_id;
                this.deliveryParams.order_id  = this.deliveryParams.order_id ? this.deliveryParams.order_id : this.params.id;
            },
            submit() {
                this.deliveryParams.express_code = $('#deliveryExpress').combogrid('getValue');
                if(this.deliveryParams.items.length<=0){
                    $.messager.alert('提示', '请选择发货商品', 'warning');
                    return;
                }
                if(!this.deliveryParams.express_code || !this.deliveryParams.express_no){
                    $.messager.alert('提示', '快递公司与单号不能为空', 'warning');
                    return;
                }
                $.post('/admin/order/delivery', deliveryVm.deliveryParams, function (data) {
                    if (data.ret === 0) {
                        $.messager.show({
                            title: '提示',
                            msg: data.msg,
                            timeout: 3000,
                            showType: 'slide'
                        });
                        $('#rightTabs').tabs('close','查看订单');
                        orderVm && orderVm.init();
                        $('#<?php echo $uniqid;?>').form('clear');
                        $("#orderdeliverydlg").dialog('close');
                    } else {
                        $.messager.alert('提示', data.msg, 'warning');
                    }
                }, 'json');
            }
        }
    });

    $(function () {
        $('#deliveryExpress').combogrid({
            panelWidth:470,
            panelHeight:380,
            idField:'code',
            textField:'name',
            url:'/admin/order/express',
            singleSelect: true,//如果为true，则只允许选择一行
            striped: true,//是否显示斑马线效果。
            pagination: true,//是否显示分页
            pageSize: 10,
            pageList: [10, 20, 30, 50],
            method: 'post',
            columns:[[
                {field:'code',title:'编码',width:100},
                {field:'name',title:'快递公司名称',width:200},
                {field:'weigh',title:'权重',width:70},
            ]]
        }).combogrid('setValue', deliveryVm.deliveryParams.express_code);
        $('#orderdeliverysubmit').click(function (data) {
            deliveryVm.submit();
        });
    });
</script>

<style>
    .tip-container {
        display: flex;
        margin-bottom: 10px;
    }
    .order-main-btn {
        margin-right: 20px;
        width: 88px;
        text-align: center;
        height: 30px;
        line-height: 30px;
        color: #fff;
        border-radius: 4px;
        background: #753ECD;
        cursor: pointer;
    }
    .order-detail-tip-title {
        color: #FFB333;
    }
    .order-detail-remark {
        color: #7438D5;
    }
    .all-refund-money-text {
        color: #FF5959;
        cursor: pointer;
    }

    .order-msg-right-money {
        font-size: 20px;
        color: #FF5000;
    }

    .order-msg-center {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
    }

    .order-msg-center .el-steps.el-steps--horizontal {
        width: 84%;
    }

    .el-steps {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    .el-steps--simple {
        padding: 13px 8%;
        border-radius: 4px;
        background: #f5f7fa;
    }

    .el-steps--horizontal {
        white-space: nowrap;
    }

    .el-steps--vertical {
        height: 100%;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-flow: column;
        flex-flow: column;
    }

    .el-step {
        position: relative;
        -ms-flex-negative: 1;
        flex-shrink: 1;
    }

    .el-step:last-of-type .el-step__line {
        display: none;
    }

    .el-step:last-of-type.is-flex {
        -ms-flex-preferred-size: auto !important;
        flex-basis: auto !important;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        -webkit-box-flex: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
    }

    .el-step:last-of-type .el-step__description,
    .el-step:last-of-type .el-step__main {
        padding-right: 0;
    }

    .el-step__head {
        position: relative;
        width: 100%;
    }

    .el-step__head.is-process {
        color: #303133;
        border-color: #303133;
    }

    .el-step__head.is-wait {
        color: #c0c4cc;
        border-color: #c0c4cc;
    }

    .el-step__head.is-success {
        color: #67c23a;
        border-color: #67c23a;
    }

    .el-step__head.is-error {
        color: #f56c6c;
        border-color: #f56c6c;
    }

    .el-step__head.is-finish {
        color: #7438d5;
        border-color: #7438d5;
    }

    .el-step__icon {
        position: relative;
        z-index: 1;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: 24px;
        height: 24px;
        font-size: 14px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        background: #fff;
        -webkit-transition: 0.15s ease-out;
        transition: 0.15s ease-out;
    }

    .el-step__icon.is-text {
        color: #fff;
        border-radius: 50%;
        border: 2px solid;
        border-color: inherit;
    }

    .el-step__icon.is-icon {
        width: 40px;
    }

    .el-step__icon-inner {
        display: inline-block;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        text-align: center;
        font-weight: 700;
        line-height: 1;
        color: inherit;
    }

    .el-step__icon-inner[class*="el-icon"]:not(.is-status) {
        font-size: 25px;
        font-weight: 400;
    }

    .el-step__icon-inner.is-status {
        -webkit-transform: translateY(1px);
        transform: translateY(1px);
    }

    .el-step__line {
        position: absolute;
        border-color: inherit;
        background-color: #c0c4cc;
    }

    .el-step__line-inner {
        display: block;
        border-width: 1px;
        border-style: solid;
        border-color: inherit;
        -webkit-transition: 0.15s ease-out;
        transition: 0.15s ease-out;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        width: 0;
        height: 0;
    }

    .el-step__main {
        white-space: normal;
        text-align: left;
    }

    .el-step__title {
        font-size: 16px;
        line-height: 38px;
    }

    .el-step__title.is-process {
        font-weight: 500;
        color: #303133;
    }

    .el-step__title.is-wait {
        color: #c0c4cc;
    }

    .el-step__title.is-success {
        color: #444;
    }

    .el-step__title.is-error {
        color: #f56c6c;
    }

    .el-step__title.is-finish {
        color: #7438d5;
    }

    .el-step__description {
        padding-right: 10%;
        margin-top: -5px;
        font-size: 12px;
        line-height: 20px;
        font-weight: 400;
    }

    .el-step__description.is-process {
        color: #303133;
    }

    .el-step__description.is-wait {
        color: #c0c4cc;
    }

    .el-step__description.is-success {
        color: #999;
    }

    .el-step__description.is-error {
        color: #f56c6c;
    }

    .el-step__description.is-finish {
        color: #7438d5;
    }

    .el-step.is-horizontal {
        display: inline-block;
    }

    .el-step.is-horizontal .el-step__line {
        height: 1px;
        top: 11px;
        left: 0;
        right: 0;
    }

    .el-step.is-vertical {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    .el-step.is-vertical .el-step__head {
        -webkit-box-flex: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        width: 24px;
    }

    .el-step.is-vertical .el-step__main {
        padding-left: 10px;
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
    }

    .el-step.is-vertical .el-step__title {
        line-height: 24px;
        padding-bottom: 8px;
    }

    .el-step.is-vertical .el-step__line {
        width: 2px;
        top: 0;
        bottom: 0;
        left: 11px;
    }

    .el-step.is-vertical .el-step__icon.is-icon {
        width: 24px;
    }

    .el-step.is-center .el-step__head {
        text-align: center;
    }

    .el-step.is-center .el-step__main {
        text-align: center;
    }

    .el-step.is-center .el-step__description {
        padding-left: 20%;
        padding-right: 20%;
    }

    .el-step.is-center .el-step__line {
        left: 50%;
        right: -50%;
    }

    .el-step.is-simple {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .el-step.is-simple .el-step__head {
        width: auto;
        font-size: 0;
        padding-right: 10px;
    }

    .el-step.is-simple .el-step__icon {
        background: 0 0;
        width: 16px;
        height: 16px;
        font-size: 12px;
    }

    .el-step.is-simple .el-step__icon-inner[class*="el-icon"]:not(.is-status) {
        font-size: 18px;
    }

    .el-step.is-simple .el-step__icon-inner.is-status {
        -webkit-transform: scale(0.8) translateY(1px);
        transform: scale(0.8) translateY(1px);
    }

    .el-step.is-simple .el-step__main {
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
    }

    .el-step.is-simple .el-step__title {
        font-size: 16px;
        line-height: 20px;
    }

    .el-step.is-simple:not(:last-of-type) .el-step__title {
        max-width: 50%;
        word-break: break-all;
    }

    .el-step.is-simple .el-step__arrow {
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    .el-step.is-simple .el-step__arrow::after,
    .el-step.is-simple .el-step__arrow::before {
        content: "";
        display: inline-block;
        position: absolute;
        height: 15px;
        width: 1px;
        background: #c0c4cc;
    }

    .el-step.is-simple .el-step__arrow::before {
        -webkit-transform: rotate(-45deg) translateY(-4px);
        transform: rotate(-45deg) translateY(-4px);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
    }

    .el-step.is-simple .el-step__arrow::after {
        -webkit-transform: rotate(45deg) translateY(4px);
        transform: rotate(45deg) translateY(4px);
        -webkit-transform-origin: 100% 100%;
        transform-origin: 100% 100%;
    }

    .el-step.is-simple:last-of-type .el-step__arrow {
        display: none;
    }

    .el-step.is-center .el-step__head {
        text-align: center;
    }

    .el-step__head.is-success {
        color: #7536D0;
        border-color: #7536D0;
    }

    .el-step__head {
        position: relative;
        width: 100%;
    }

    .el-step__head.is-success .el-step__icon.is-text {
        background: #7536D0;
    }

    .el-step__icon.is-text {
        background: #eee;
        border: 4px solid #fff;
    }

    .el-step__icon.is-text {
        border-radius: 50%;
    }

    .el-step__icon {
        width: 38px;
        height: 38px;
    }

    .el-step.is-horizontal .el-step__line {
        top: 18px;
    }

    .el-table th .cell, .el-table td .cell {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .el-table th.is-leaf {
        border-bottom: none;
    }

    .el-table td, .el-table th, .el-table th.is-leaf {
        border-color: #f7f7f7;
    }

    .el-table th {
        font-size: 13px;
    }

    .el-table th {
        background: #F9F9F9;
    }

    .el-table th {
        padding: 7px 0;
    }

    .el-table, .el-table thead, .el-table th {
        color: #444;
        font-weight: 500;
    }
    .cursor-pointer {
        cursor: pointer;
    }
    .theme-color {
        color: #7536D0;
    }
</style>
